<template>
  <div v-if="isShow" class="planAudit">
    <div class="left">
      <div class="title-frame">
        <div class="text blue"></div>
        <div class="text">
          <h1>计划审核</h1>
        </div>
      </div>
      <div class="infor">
        <div class="bgi">
          <div class="information">
            <transition-group tag="ul" class="slide">
              <li v-for="(item, index) of informationList" :key="item.name" class="liClass">{{ item.name + item.value }}</li>
            </transition-group>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="sign">
          <div class="submitIcon common"></div>
          <div class="rejectIcon common">
            <div class="line"></div>
            <div class="icon"></div>
          </div>
          <div class="completeIcon common">
            <div class="line"></div>
            <div class="icon"></div>
          </div>
          <div class="passIcon common">
            <div class="line"></div>
            <div class="icon"></div>
          </div>
          <div class="activationIcon common">
            <div class="line"></div>
            <div class="icon"></div>
          </div>
          <div class="handleIcon common">
            <div class="line"></div>
            <div class="icon"></div>
          </div>
        </div>
        <div class="text">
          <div class="submitText common">
            提交
            <br />2020-09-12 17:30:00
          </div>
          <div class="rejectText common">
            驳回
            <br />2020-09-12 17:30:00
          </div>
          <div class="completeText common">用户修改完成</div>
          <div class="passText common">审核通过</div>
          <div class="activationText common">激活</div>
          <div class="handleText common">终止</div>
        </div>
      </div>
      <div class="main">
        <div class="five-div five-one">
          <div class="qualification">
            <ul>
              <li v-for="(item, index) of qualificationList" :key="index" class="liClass">
                {{ item.name + item.value }}
                <div :class="item.conflictType"></div>
              </li>
            </ul>
            <div>
              <div class="file-three">
                <div class="file fileOne"></div>
                <div class="file fileTwo"></div>
                <div class="file fileThree"></div>
              </div>
              <div class="qualificate">资质文件1.pdf</div>
            </div>
          </div>
        </div>
        <div class="five-div five-two">
          <div class="weather">
            <ul>
              <li v-for="(item, index) of weatherList" :key="index" class="liClass">
                {{ item.name + item.value }}
                <div :class="item.conflictType"></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="five-div five-three">
          <div class="useList">
            <ul>
              <li v-for="(item, index) of useList" :key="index" class="liClass">
                {{ item.name + item.value }}
                <div :class="item.conflictType"></div>
              </li>
            </ul>
            <div>
              <div class="file-three">
                <div class="file fileFour"></div>
                <div class="file fileFive"></div>
              </div>
              <div class="qualificate">资质文件1.pdf</div>
            </div>
          </div>
        </div>
        <div class="five-div five-four">
          <div class="route">
            <ul v-for="(item, index) of routeList" :key="index">
              <li class="liClass">{{ item.name }}</li>
              <li class="liClass">
                {{ item.value }}
                <div :class="item.conflictType"></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="five-div five-five">
          <div class="handle">
            <div :class="agree">{{ result }}</div>
            <div class="reason">理由：</div>
            <div class="suggest1">
              <ul>
                <li v-for="(item, index) of suggestList1" :key="index" class="liClass">{{ item.value }}</li>
              </ul>
            </div>
            <div class="suggest">建议：</div>
            <div class="suggest2">
              <ul>
                <li v-for="(item, index) of suggestList2" :key="index" class="liClass">{{ item.value }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="plan-button">
          <el-button class="common" type="primary ">{{ design }}</el-button>
          <el-button class="common" type="danger">驳回</el-button>
          <el-button class="common" type="success">同意</el-button>
          <el-button class="common" type="warning">报备</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: 'agree',
      result: '同意此项飞行计划',
      design: '计划推演',
      conflictType: [{ value1: '时间冲突' }, { value2: '航线冲突' }, { value3: '容量冲突' }, { value4: '轨迹冲突' }],
      isShow: true,
      informationList: [
        { name: '飞行单位：', value: '淄博禾创文化传媒有限公司' },
        { name: '呼号：', value: 'VE4AB' },
        { name: '任务性质：', value: '农业作业' },
        { name: '起飞机场', value: '历城区机场' },
        { name: '降落机场：', value: '胶州区机场' },
        { name: '作业时间：', value: '1小时' },
        { name: '架次：', value: '1架次' },
        { name: '联系人：', value: '赵四' },
        { name: '联系方式：', value: '123456789' },
        { name: '备注信息：', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX' },
        { name: '航空器注册地：', value: '山东' },
        { name: '机载监测设备类型：', value: '侦查照相机' },
        { name: '机组人员国籍：', value: '中国' },
        { name: '主要登机人员名单：', value: '无' }
      ],
      qualificationList: [
        {
          name: '飞行执照编号：',
          value: 'PPL201009120009',
          conflictType: 'iconGreen'
        },
        { name: '机长：', value: '郭五', conflictType: 'iconGreen' },
        { name: '联系人：', value: '赵四', conflictType: 'iconGreen' },
        { name: '黑白名单校验：', value: '13277886740', conflictType: 'iconGreen' },
        { name: '航空器型号：', value: '天鹰-3型无人机', conflictType: 'iconGreen' }
      ],
      weatherList: [
        {
          name: '天气条件：',
          value: '中雨',
          conflictType: 'iconGreen'
        },
        { name: '能见度：', value: '500m', conflictType: 'iconGreen' },
        { name: '风速：', value: '3级', conflictType: 'iconGreen' },
        { name: '风向：', value: '西北风', conflictType: 'iconGreen' }
      ],
      useList: [
        {
          name: '飞行空域类型：',
          value: '管制空域',
          conflictType: 'iconGreen'
        },
        { name: '飞行空域编号：', value: 'c1245', conflictType: 'iconGreen' },
        { name: '空域规则：', value: '3级', conflictType: 'iconGreen' },
        { name: '空域容量：', value: '80%', conflictType: 'iconGreen' }
      ],
      routeList: [
        {
          name: '航线编号：',
          value: 'HK4572',
          conflictType: 'iconGreen'
        },
        { name: '飞行高度：', value: '2400米', conflictType: 'iconGreen' },
        {
          name: '预计飞行开始：',
          value: '2020-09-12 12：00：00',
          conflictType: 'iconGreen'
        },
        {
          name: '预计结束开始：',
          value: '2020-09-12 12：00：00',
          conflictType: 'iconGreen'
        }
      ],
      suggestList1: [
        { value: '1.机长不具备该航空器飞行资质' },
        { value: '2.计划起飞时间冲突' },
        { value: '3.飞行计划期间有中雨，不满足气象条件' },
        { value: '4.所申请飞行空域容量已超限' }
      ],
      suggestList2: [
        { value: '1.起飞时间延后30分钟，建议上午9点起飞' },
        { value: '2.起飞航线建议调整为HX1243' },
        { value: '3.作业高度建议调整至2300米' }
      ]
    }
  },
  watch: {
    qualificationList: {
      handler(val) {
        for (const i in val) {
          if (val[i].conflictType === 'iconRed') {
            this.design = '冲突消解'
            this.result = '驳回此项飞行计划'
            this.agree = 'refuse'
            break
          }
        }
      },
      deep: true,
      immediate: true
    },
    weatherList: {
      handler(val) {
        for (const i in val) {
          if (val[i].conflictType === 'iconRed') {
            this.design = '冲突消解'
            this.result = '驳回此项飞行计划'
            this.agree = 'refuse'
            break
          }
        }
      },
      deep: true,
      immediate: true
    },
    useList: {
      handler(val) {
        for (const i in val) {
          if (val[i].conflictType === 'iconRed') {
            this.design = '冲突消解'
            this.result = '驳回此项飞行计划'
            this.agree = 'refuse'
            break
          }
        }
      },
      deep: true,
      immediate: true
    },
    routeList: {
      handler(val) {
        for (const i in val) {
          if (val[i].conflictType === 'iconRed') {
            this.design = '冲突消解'
            this.result = '驳回此项飞行计划'
            this.agree = 'refuse'
            break
          }
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    closeFun() {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.planAudit {
  position: absolute;
  bottom: 10px;
  padding-left: 14px;
  width: 1920px;
  height: 460px;
  background: rgba(15, 30, 61, 1);
  .left {
    width: 390px;
    height: 100%;
    float: left;
    .title-frame {
      width: 200px;
      height: 60px;
      .text {
        float: left;
        line-height: 38px;
        padding-top: 15px;
        font-size: 14px;
      }
      .blue {
        width: 6px;
        height: 20px;
        border-radius: 20%;
        background: #62adf8;
        margin-top: 16px;
        margin-right: 4px;
      }
    }
    .infor {
      width: 372px;
      height: 399px;
      .bgi {
        width: 100%;
        height: 100%;
        background: url('../../assets/rightNav/编组 9备份.png') center no-repeat;
        .information {
          width: 320px;
          height: 350px;
          padding: 40px 0 0 10px;
          .slide-enter-active {
            transition: all 5s ease;
          }
          .slide-leave-active {
            transition: all 5s ease;
          }
          .slide-enter, .slide-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
            transform: translateX(10px);
            opacity: 0;
          }
          .liClass {
            height: 25px;
            width: 100%;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            padding-left: 20px;
          }
        }
      }
    }
  }
  .right {
    height: 100%;
    width: 1490px;
    float: left;
    .right-top {
      height: 80px;
      .sign {
        height: 30px;
        width: 1200px;
        margin: 20px 0 0 180px;
        .common {
          float: left;
          height: 100%;
          width: 20px;
        }
        .submitIcon {
          background: url('../../assets/rightNav/形状备份.png') center no-repeat;
        }
        .rejectIcon {
          width: 220px;
          .line {
            float: left;
            width: 200px;
            height: 2px;
            margin-top: 16px;
            background: rgba(149, 242, 2, 1);
          }
          .icon {
            float: left;
            width: 20px;
            height: 100%;
            background: url('../../assets/rightNav/错误.png') center no-repeat;
          }
        }
        .completeIcon {
          width: 220px;
          .line {
            float: left;
            width: 200px;
            height: 2px;
            margin-top: 16px;
            background: rgba(150, 150, 150, 1);
          }
          .icon {
            float: left;
            width: 15px;
            height: 15px;
            background: rgba(150, 150, 150, 1);
            border: 1px solid rgba(255, 255, 255, 1);
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 50px;
            margin-top: 9px;
          }
        }
        .passIcon {
          width: 220px;
          .line {
            float: left;
            width: 200px;
            height: 2px;
            margin-top: 16px;
            background: rgba(150, 150, 150, 1);
          }
          .icon {
            float: left;
            width: 15px;
            height: 15px;
            background: rgba(150, 150, 150, 1);
            border: 1px solid rgba(255, 255, 255, 1);
            border-radius: 50px;
            margin-top: 9px;
          }
        }
        .activationIcon {
          width: 220px;
          .line {
            float: left;
            width: 200px;
            height: 2px;
            margin-top: 16px;
            background: rgba(150, 150, 150, 1);
          }
          .icon {
            float: left;
            width: 15px;
            height: 15px;
            background: rgba(150, 150, 150, 1);
            border: 1px solid rgba(255, 255, 255, 1);
            border-radius: 50px;
            margin-top: 9px;
          }
        }
        .handleIcon {
          width: 220px;
          .line {
            float: left;
            width: 200px;
            height: 2px;
            margin-top: 16px;
            background: rgba(150, 150, 150, 1);
          }
          .icon {
            float: left;
            width: 15px;
            height: 15px;
            background: rgba(150, 150, 150, 1);
            border: 1px solid rgba(255, 255, 255, 1);
            border-radius: 50px;
            margin-top: 9px;
          }
        }
      }
      .text {
        height: 40px;
        width: 1800px;
        padding-left: 90px;
        .common {
          float: left;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 22px;
          text-align: center;
        }
        .submitText {
          width: 200px;
        }
        .rejectText {
          width: 240px;
        }
        .completeText {
          width: 200px;
        }
        .passText {
          width: 240px;
        }
        .activationText {
          width: 200px;
        }
        .handleText {
          width: 240px;
        }
      }
    }
    .main {
      height: 370px;
      .five-div {
        width: 284px;
        height: 300px;
        margin-right: 10px;
        float: left;
      }
      .five-one {
        background: url('../../assets/rightNav/编组 9备份 2.png') center no-repeat;
        .qualification {
          height: 180px;
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          padding: 40px 0 0 20px;
          .liClass {
            height: 20px;
            width: 90%;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            padding: 10px 0 0 0px;
            .iconGreen {
              background: url('../../assets/rightNav/形状备份.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
            .iconRed {
              background: url('../../assets/rightNav/错误.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
          }
          .file-three {
            width: 260px;
            height: 80px;
            .file {
              float: left;
              margin: 20px 10px 0 0;
              width: 75px;
              height: 50px;
              background-color: #fff;
            }
            .fileOne {
              background: url('../../assets/rightNav/plane1.jpg') center no-repeat;
              background-size: contain;
            }
            .fileTwo {
              background: url('../../assets/rightNav/plane2.jpg') center no-repeat;
              background-size: contain;
            }
            .fileThree {
              background: url('../../assets/rightNav/plane3.jpg') center no-repeat;
              background-size: contain;
            }
          }
          .qualificate {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(44, 132, 220, 1);
            line-height: 20px;
            cursor: pointer;
          }
        }
      }
      .five-two {
        background: url('../../assets/rightNav/气候条件.png') center no-repeat;
        .weather {
          height: 180px;
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          padding: 40px 0 0 20px;
          .liClass {
            height: 20px;
            width: 90%;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            padding: 10px 0 0 0px;
            .iconGreen {
              background: url('../../assets/rightNav/形状备份.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
            .iconRed {
              background: url('../../assets/rightNav/错误.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
          }
        }
      }
      .five-three {
        background: url('../../assets/rightNav/空域使用审核.png') center no-repeat;
        .useList {
          height: 280px;
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          padding: 40px 0 0 20px;
          .liClass {
            height: 20px;
            width: 90%;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            padding: 10px 0 0 0px;
            .iconGreen {
              background: url('../../assets/rightNav/形状备份.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
            .iconRed {
              background: url('../../assets/rightNav/错误.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
          }
          .file-three {
            width: 260px;
            height: 110px;
            .file {
              float: left;
              margin: 50px 10px 0 0;
              width: 75px;
              height: 50px;
              background-color: #fff;
            }
            .fileFour {
              background: url('../../assets/rightNav/plane4.jpg') center no-repeat;
              background-size: contain;
            }
            .fileFive {
              background: url('../../assets/rightNav/plane5.jpg') center no-repeat;
              background-size: contain;
            }
          }
          .qualificate {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(44, 132, 220, 1);
            line-height: 20px;
            cursor: pointer;
          }
        }
      }
      .five-four {
        background: url('../../assets/rightNav/航线审核.png') center no-repeat;
        .route {
          height: 180px;
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          padding: 40px 0 0 20px;
          .liClass {
            height: 20px;
            width: 90%;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
            padding: 10px 0 0 0px;
            .iconGreen {
              background: url('../../assets/rightNav/形状备份.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
            .iconRed {
              background: url('../../assets/rightNav/错误.png') center no-repeat;
              height: 20px;
              width: 20px;
              float: right;
            }
          }
        }
      }
      .five-five {
        background: url('../../assets/rightNav/处理意见.png') center no-repeat;
        .handle {
          width: 260px;
          height: 270px;
          padding: 40px 0 0 15px;
          .refuse {
            width: 112px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(210, 4, 4, 1);
            line-height: 20px;
          }
          .agree {
            width: 112px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgb(83, 194, 32);
            line-height: 20px;
          }
          .reason {
            width: 42px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(5, 154, 254, 1);
            line-height: 20px;
          }
          .suggest1 {
            width: 260px;
            height: 100px;
            .liClass {
              width: 250px;
              height: 25px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              line-height: 25px;
            }
          }
          .suggest {
            width: 42px;
            height: 25px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(5, 154, 254, 1);
            line-height: 25px;
          }
          .suggest2 {
            width: 260px;
            height: 80px;
            .liClass {
              width: 270px;
              height: 30px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              line-height: 30px;
            }
          }
        }
      }
      .plan-button {
        float: right;
        margin: 10px 20px 0 0;
        .common {
          width: 100px;
        }
      }
    }
  }
}
</style>
